'use client';

import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';


interface Car {
  id: string;
  name: string;
  brand: string;
  price: number;
  type: 'sedan' | 'suv' | 'coupe' | 'hatchback';
  fuelType: 'gasoline' | 'electric' | 'hybrid' | 'diesel';
  year: number;
  condition: 'new' | 'used';
  mileage?: number;
  location: string;
  description: string;
}

export default function EditCarPage({ params }: { params: { id: string } }) {
  const { user } = useAuth();
  const router = useRouter();
  const [car, setCar] = useState<Car | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);

  // 模拟车辆数据
  const mockCar: Car = {
    id: params.id,
    name: 'Model S',
    brand: '特斯拉',
    price: 850000,
    type: 'sedan',
    fuelType: 'electric',
    year: 2024,
    condition: 'new',
    mileage: 0,
    location: '北京',
    description: '全新特斯拉Model S，配备最新的自动驾驶功能。'
  };

  useEffect(() => {
    if (!user || user.role !== 'admin') {
      router.push('/login');
      return;
    }

    // 模拟加载数据
    setTimeout(() => {
      setCar(mockCar);
      setIsLoading(false);
    }, 1000);
  }, [user, router, params.id]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // 模拟提交
    setTimeout(() => {
      alert('车辆信息更新成功！');
      router.push('/admin/cars');
    }, 1000);
  };

  if (!user || user.role !== 'admin') {
    return null;
  }

  if (isLoading) {
    return (
      <div className="p-8 text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
        <p className="mt-4 text-gray-600">加载中...</p>
      </div>
    );
  }

  if (!car) {
    return (
      <div className="text-center py-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-4">车辆不存在</h2>
        <button
          onClick={() => router.push('/admin/cars')}
          className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
        >
          返回车辆列表
        </button>
      </div>
    );
  }

  return (
    <>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">编辑车辆</h1>
        <p className="text-gray-600">修改车辆信息</p>
      </div>

      <div className="bg-white rounded-lg shadow-sm border p-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                车辆名称 *
              </label>
              <input
                type="text"
                required
                defaultValue={car.name}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                品牌 *
              </label>
              <select
                required
                defaultValue={car.brand}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="特斯拉">特斯拉</option>
                <option value="奔驰">奔驰</option>
                <option value="宝马">宝马</option>
                <option value="奥迪">奥迪</option>
                <option value="丰田">丰田</option>
              </select>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                价格 (元) *
              </label>
              <input
                type="number"
                required
                min="0"
                defaultValue={car.price}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                年份 *
              </label>
              <input
                type="number"
                required
                min="1900"
                max="2025"
                defaultValue={car.year}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                里程 (公里)
              </label>
              <input
                type="number"
                min="0"
                defaultValue={car.mileage || 0}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                车型 *
              </label>
              <select
                required
                defaultValue={car.type}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="sedan">轿车</option>
                <option value="suv">SUV</option>
                <option value="coupe">跑车</option>
                <option value="hatchback">掀背车</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                燃料类型 *
              </label>
              <select
                required
                defaultValue={car.fuelType}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="gasoline">汽油</option>
                <option value="electric">电动</option>
                <option value="hybrid">混动</option>
                <option value="diesel">柴油</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                车况 *
              </label>
              <select
                required
                defaultValue={car.condition}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="new">新车</option>
                <option value="used">二手车</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              所在地 *
            </label>
            <input
              type="text"
              required
              defaultValue={car.location}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              车辆描述
            </label>
            <textarea
              rows={4}
              defaultValue={car.description}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div className="flex justify-end space-x-4 pt-6">
            <button
              type="button"
              onClick={() => router.back()}
              className="px-6 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
            >
              取消
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
            >
              {isSubmitting ? '保存中...' : '保存修改'}
            </button>
          </div>
        </form>
      </div>
    </>
  );
}